<template>
  <div class="home">
    <h1>Home</h1>
    <h3>访问state中数据</h3>
    ---------------------------------
    <br>
    <div>直接获取 {{ $store.state.numA }}</div>
    ---------------------------------
    <br>
    <div>从data中获取{{cnumA}} </div>
    --------------------------------
    <br>
    <div>
      从计算属性中获取{{getNumA}}
    </div>
    --------------------------------
    <br>
    <div>通过辅助函数获取{{numA}} {{person}}</div>
    <br>
    <hr>
    <br>
    <h3>访问getters中的数据</h3>
    <div>直接获取{{$store.getters.fmtNumA}}</div>
    --------------------------------------------
    <br>
    <div>通过辅助函数获取{{fmtNumA}} </div>
    <br>
    <hr>
    <br>
    <h3>访问mutations中的数据</h3>
    <button @click="add">点击添加</button>
    <button @click="add2">点击添加信息</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
  name: "HomeView",
  data(){
    return{
      cnumA:this.$store.state.numA
    }
  },
  computed:{
    ...mapState(['numA','person']),
    ...mapGetters(["fmtNumA"]),
    getNumA(){
      return this.$store.state.numA
    }
  },
  methods:{
    ...mapMutations(["addPerson"]),
    ...mapActions(["asyncAddPerson"]),
    add(){
       // 方式一: commit(方法名，参数) 触发mutations
    // this.$store.commit("addPerson",{name:"老六",age:30});

    // 方式二:辅助函数  mapMutations
    this.addPerson({name:"老六",age:26})
    },
    add2(){
      // 方式一: 
      // this.$store.dispatch("asyncAddPerson",{name : "老王",age: 24})

      // 方式二: 辅助函数
      this.asyncAddPerson({name:"老王",age:24})
    }
  },
  components: {},
};
</script>
